<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器的渲染流程(The rendering process of the browser)</title>
  <!-- 
  浏览器的渲染流程是指在加载网页时，浏览器如何处理HTML、CSS和JavaScript，并将它们转换为可视化的页面的过程。以下是浏览器的渲染流程的总结： 
 
    1. 构建DOM树：浏览器首先会解析HTML文档，构建DOM（文档对象模型）树，表示网页的结构和内容。 
    
    2. 构建CSSOM树：浏览器接着会解析CSS样式表，构建CSSOM（CSS对象模型）树，表示网页的样式信息。 
    
    3. 合并DOM树和CSSOM树：浏览器将DOM树和CSSOM树合并，生成渲染树（Render Tree），其中包含了需要显示的元素及其样式信息。 
    
    4. 布局（Layout）：浏览器根据渲染树的信息进行布局计算，确定每个元素在页面中的位置和大小。 
    
    5. 绘制（Paint）：浏览器根据布局计算结果，将页面内容绘制到屏幕上。 
    
    6. 重绘和重排：当页面发生变化时，浏览器会触发重绘（Repaint）和重排（Reflow）操作，重新计算布局和绘制页面。 
  -->
  <link rel="stylesheet" href="./css/style.css">
  <style>
    /* 2. 构建CSSOM树 */
    .container {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <!-- 1.构建DOM树 -->
  <div class="container">
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <div class="title">
      <h2>This is a title.</h2>
      <p>This is another paragraph.</p>
      <span>dom box</span>
    </div>
  </div>

  <!-- 3.合并DOM树+CSSOM树 -->
  <!-- 4.布局Layout -->
  <!-- 5.绘制Paint -->
  <!-- 6.重绘和重排 -->
  
</body>
</html>